<template>
  <div>
    <el-form ref="form" :model="currentForm" label-width="120px" label-suffix="：" label-position="right">
      <el-form-item label="计划名称">
        <template v-if="canEdit">
          <el-input v-model="currentForm.planName"></el-input>
          <div class="tips">选填，不填系统将默认生成计划名称</div>
        </template>
        <template v-else>
          {{currentForm.planName}}
        </template>

      </el-form-item>

      <template v-if="currentForm.type === PLAN_TYPE_FL()">

        <el-form-item label="装柜方式">
          <el-radio-group v-model="currentForm.makeContainerType" @change="changeContainer">
            <el-radio :label="1">
              物流商装柜
              <el-popover
                placement="top"
                width="300"
                trigger="hover"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
              >
                <template slot="default">
                  发货到物流商国内仓库，物流商操作打板装柜的货件
                </template>
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </el-radio>
            <el-radio :label="2">
              自行装柜
              <el-popover
                placement="top"
                width="300"
                trigger="hover"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
              >
                <template slot="default">
                  自行发货到码头/机场打板装柜，无需送往国内物流商仓库的货件
                </template>
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="国内收货仓库" v-if="currentForm.makeContainerType === 1">
          <template v-if="canEdit">
            <el-radio-group v-model="currentForm.flWarehouseId">
              <el-radio
                v-for="item in flWarehouseList"
                :key="item.id"
                :label="item.id"
              >
                <fl-warehouse-item :warehouse="item"></fl-warehouse-item>
              </el-radio>
            </el-radio-group>
          </template>
          <template v-else>
            {{ currentFlWarehouse.warehouseName }}
          </template>

        </el-form-item>

        <el-form-item label="海外收货仓库">
          <template v-if="canEdit">
            <el-radio-group v-model="currentForm.warehouseId">
              <el-radio
                v-for="item in warehouseList"
                :key="item.id"
                :label="item.id"
              >
                <warehouse-item :warehouse="item"></warehouse-item>
              </el-radio>
            </el-radio-group>
          </template>
          <template v-else>
            {{ currentWarehouse.warehouseName }}
          </template>

        </el-form-item>

        <el-form-item label="运输类型">
          <template v-if="canEdit">
            <el-radio-group v-model="currentForm.transferType">
              <el-radio
                v-for="item in transferTypeList"
                :key="item.transferType"
                :label="item.transferType"
              >
                {{item.typeName}}
              </el-radio>
            </el-radio-group>
          </template>
          <template v-else>
            {{getTransferName(currentForm.transferType)}}
          </template>

        </el-form-item>

        <el-form-item label="预计送达时间">
          <template v-if="canEdit">
            <el-date-picker
              v-model="currentForm.deliverDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <div class="tips">货件预计送达国内仓库的日期</div>
          </template>
          <template v-else>
            {{currentForm.deliverDate || '-'}}
          </template>

        </el-form-item>

      </template>
      <template v-else-if="currentForm.type === PLAN_TYPE_MW()">
        <el-form-item label="收货仓库">
          <template v-if="canEdit">
            <el-radio-group v-model="currentForm.warehouseId">
              <el-radio
                v-for="item in warehouseList"
                :key="item.id"
                :label="item.id"
              >
                <warehouse-item :warehouse="item"></warehouse-item>
              </el-radio>
            </el-radio-group>
          </template>
          <template v-else>
            {{ currentWarehouse.warehouseName }}
          </template>
        </el-form-item>

        <el-form-item label="移仓类型">
          <template v-if="canEdit">
            <el-radio-group v-model="currentForm.moveWarehouseType" @change="changeMWT">
              <el-radio
                v-for="item in mwTypeList"
                :key="item.label"
                :label="item.label"
              >
                {{item.text}}
              </el-radio>
            </el-radio-group>
          </template>
          <template v-else>
            {{mwTypeList.find(item=> item.label === currentForm.moveWarehouseType).text}}
          </template>

        </el-form-item>
        <template v-if="currentForm.moveWarehouseType === MW_TYPE_WC()">
          <el-form-item label="货柜号">
            <template v-if="canEdit">
              <el-input v-model="currentForm.containerNo"></el-input>
            </template>
            <template v-else>
              {{currentForm.containerNo}}
            </template>
          </el-form-item>
        </template>

        <el-form-item label="物流单号" v-if="currentForm.moveWarehouseType !== MW_TYPE_WC()">
          <template v-if="canEdit">
            <el-radio-group v-model="currentForm.haveLogisticsNo">
              <el-radio :label="true">有物流单号</el-radio>
              <el-radio :label="false">无物流单号</el-radio>
            </el-radio-group>
          </template>
          <template v-else>
            {{currentForm.haveLogisticsNo ? '有物流单号' : '无物流单号'}}
          </template>
        </el-form-item>

      </template>

    </el-form>
  </div>
</template>


<script>
import FlWarehouseItem from "@/views/shipment/components/FlWarehouseItem.vue";
import WarehouseItem from "@/views/shipment/components/WarehouseItem.vue";
import {MW_TYPE_BC, MW_TYPE_WC, PLAN_TYPE_FL, PLAN_TYPE_MW} from "@/utils/shippingPlan";

export default {
  methods: {
    MW_TYPE_WC() {
      return MW_TYPE_WC
    },
    PLAN_TYPE_FL() {
      return PLAN_TYPE_FL
    },
    PLAN_TYPE_MW() {
      return PLAN_TYPE_MW
    },
    getTransferName(transferType){
      const item = this.transferTypeList.find(item=> item.transferType === transferType)
      return item ? item.typeName : ''
    },
    changeMWT(){
      if(this.currentForm.moveWarehouseType === MW_TYPE_WC){
        this.currentForm.haveLogisticsNo = false
      }
    },
    changeContainer(){
      if(this.currentForm.makeContainerType === 1){
        if(!this.currentForm.flWarehouseId){
          this.currentForm.flWarehouseId = this.flWarehouseList[0].id
        }
      }else{
        this.currentForm.flWarehouseId = 0
      }
    },
  },
  components: {WarehouseItem, FlWarehouseItem},
  computed: {
    currentFlWarehouse() {
      return this.flWarehouseList.find(item=> item.id === this.currentForm.flWarehouseId)
    },
    currentWarehouse() {
      return this.warehouseList.find(item => item.id === this.currentForm.warehouseId)
    }
  },
  name: 'ShippingPlanForm',
  props: {
    currentForm: {
      type: Object,
    },
    warehouseList: {
      type: Array,
    },
    transferTypeList: {
      type: Array,
    },
    flWarehouseList: {
      type: Array,
    },
    // 是否能编辑
    canEdit: {
      type: Boolean,
      default: true,
    }
  },
  data(){
    return {
      // 移仓类型
      mwTypeList: [
        {
          label: MW_TYPE_BC,
          text: '散货入仓',
        },
        {
          label: MW_TYPE_WC,
          text: '整柜入仓',
        },
      ],
    }
  },

}
</script>

<style scoped lang="scss">
.tips{
  color: #AAAAAA;
}
</style>
